<template>
  <div>
      <h2>我的预约</h2>
      <!-- 这里可以展示用户的预约信息 -->
      <p v-if="reservations.length === 0">此处没有预约记录。</p>
      <ul v-else>
          <li v-for="reservation in reservations" :key="reservation.id">
              预约 ID: {{ reservation.id }} - 地点: {{ reservation.locationName }} - 预约时间: {{ reservation.reservationTime }}
          </li>
      </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { findReservationByUserIdService } from '@/api/locationrecord.js'; // 确保路径正确

const reservations = ref([]); // 用于存储预约记录

// 假设您通过某种方式获取当前用户 ID，例如从 Vuex 或本地存储
const userId = 'currentUserId'; // TODO: 实际获取用户 ID 的方式

// 查询当前用户的预约记录
const fetchReservations = async () => {
  try {
      const response = await findReservationByUserIdService({ userId }); // 如果 API 需要参数
      reservations.value = response.data; // 假设服务返回的数据包含预约记录数组
      console.log('用户的预约记录:', reservations.value); // 输出预约记录到控制台
  } catch (error) {
      console.error('查询预约记录时出错:', error);
  }
};

onMounted(() => {
  fetchReservations(); // 组件挂载时调用查询函数
});
</script>

<style scoped>
/* 在这里添加样式 */
</style>
